@import '@/styles/variables.less';
@import '@/styles/mixins.less';

.progress-bar {
  width: 100%;

  &--small {
    height: 6px;
  }

  &--medium {
    height: 8px;
  }

  &--large {
    height: 12px;
  }

  &__track {
    width: 100%;
    height: 100%;
    background: @gray-200;
    border-radius: 9999px;
    overflow: hidden;
    position: relative;

    // Color variants
    &--primary {
      .progress-bar__fill {
        background: @primary-600;
      }
    }

    &--success {
      .progress-bar__fill {
        background: @success-600;
      }
    }

    &--warning {
      .progress-bar__fill {
        background: @warning-600;
      }
    }

    &--danger {
      .progress-bar__fill {
        background: @error-600;
      }
    }

    // Striped effect
    &--striped {
      .progress-bar__fill {
        background-image: linear-gradient(
          45deg,
          rgba(255, 255, 255, 0.15) 25%,
          transparent 25%,
          transparent 50%,
          rgba(255, 255, 255, 0.15) 50%,
          rgba(255, 255, 255, 0.15) 75%,
          transparent 75%,
          transparent
        );
        background-size: 1rem 1rem;
      }
    }

    // Animation
    &--animated {
      .progress-bar__fill {
        background-size: 1rem 1rem;
        animation: progress-bar-stripes 1s linear infinite;
      }
    }
  }

  &__fill {
    height: 100%;
    border-radius: inherit;
    transition: width 0.6s ease;
    position: relative;
    .flex-center();
    min-width: 0;
  }

  &__label {
    font-size: @font-size-xs;
    font-weight: 600;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
  }
}

// Animation keyframes
@keyframes progress-bar-stripes {
  0% {
    background-position: 1rem 0;
  }
  100% {
    background-position: 0 0;
  }
}

// Responsive
@media (max-width: 768px) {
  .progress-bar {
    &__label {
      font-size: @font-size-xs;
    }
  }
}
